<script lang="tsx">
/**
 * 登录
 */
export default {
  name: "login"
}
</script>

<script lang="tsx" setup>
import {ref} from "vue"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import {processRequest} from "@/frame/apis/request"
import {FRAME_APIS} from "@/frame/apis/contact"
import token from "@/frame/apis/token/token.ts"

/**
 * 定义router
 */
const router = useRouter()

/**
 * 账号、密码
 */
const account = ref()
const password = ref()
const handleClick = async () => {
  if (account.value == null || password.value == null) {
    ElMessage.error("账号或者密码不可为空!")
    return false
  }
  const result = await processRequest.post(FRAME_APIS.LOGIN_BASE,
      {
        account: account.value,
        password: password.value
      })
  token.set(result)
  await router.push({path: "/code-rule"})
}
</script>

<template>
  <div class="login">
    <div class="container">
      <form class="login-form" onsubmit="return false">
        <div class="head" style="text-align: center">
          <p>卓凡博客管理系统</p>
        </div>
        <div class="actual-from">
          <div class="input-wrap">
            <input id="login_account" v-model="account" autocomplete="off" class="input-field" placeholder="账号"
                   required
                   type="text">
            <label for="login_account"></label>
          </div>
          <div class="input-wrap">
            <input id="login_password" v-model="password" autocomplete="off" class="input-field" placeholder="密码"
                   required type="password">
            <label for="login_password"></label>
          </div>
          <button class="login-btn" @click="handleClick">登录</button>
        </div>
      </form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  margin-left: 150px;
  width: 30%;
  height: 60%;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: rgb(255, 255, 255);
}

form {
  /*设置大小*/
  max-width: 80%;
  width: 100%;
  height: 100%;
  /*居中*/
  margin: 0 auto;
  /*设置了伸缩，纵向排列，均等散开*/
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /*设置了grid布局的大小*/
  grid-column: 1/2;
  grid-row: 1/2;
}

.title {
  display: flex;
  align-items: center;
}

.title p {
  font-size: 30px;
}

.head p {
  font-size: 20px;
  font-weight: 600;
}

.head span {
  font-size: 20px;
  font-weight: 400;
  display: inline;
}

/*输入框*/
.input-wrap {
  position: relative;
  height: 50px;
  margin-bottom: 30px;
}

.input-field {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0;
  font-size: 20px;
  background: none;
  border-radius: 10px;
  text-indent: 5%;
  border-bottom: 1px solid #bbb;
}

.input-field:focus {
  background-color: white;
  color: black;
}

label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 25%;
  font-size: 30px;
}

.login-btn {
  display: inline-block;
  width: 100%;
  height: 20%;
  border: none;
  border-radius: 10px;
}
</style>